<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>首页</title>
</head>
<body>
  <div class="router-view"></div>
  <a href="/shop">代买</a>
  <a href="/my">我的</a>
  <footer></footer>
  <script>
    const allA = document.querySelectorAll('a');
    const routes = [
      {
        path: '/my',
        component: '<h1>我的</h1>'
      },
      {
        path: '/shop',
        component: '<h1>代买</h1>'
      }
    ]
    const routerView = document.querySelector('.router-view');
    allA.forEach(el => {
      el.addEventListener('click', (e) => {
        e.preventDefault();
        // 在url地址后面加#号  hash
        // window.location.hash = e.target.getAttribute('href');
        // 通过history对象的pushState方法来改变url地址
        window.history.pushState(null, null, e.target.getAttribute('href'));
        // 更新视图
        routerView.innerHTML = routes.find(el => el.path === e.target.getAttribute('href')).component;
      })
    })
  </script>
</body>
</html>